
  <div class="padding-all">
	 <div ng-include src="'/ksr/partials/breadcrumb.htm'"></div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">{{mode}} Event</h3>
	  </div>
	  <div class="panel-body">
		<form role="form" name = "eventForm" class="ksr-form" ng-submit="eventForm.$valid&&submit()" novalidate>
			<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.eventName.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Event name is required
	    	</div>
	    	<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Event Name</span>
			  <input type="text" class="form-control" name="eventName" ng-model="event.eventName" ng-required="true" placeholder="Enter event name"/>
			</div>

			<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.eventType.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Event type is required
	    	</div>
	    	<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Event Type</span>
			  <input type="text" class="form-control" name="eventType" ng-model="event.eventType" ng-required="true" placeholder="Enter event type"/>
			</div>

			<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Categories</span>
			  <div class="padding-all border-all round-corner form-control" ng-show="event.categories.length>0">
			    	<span ng-repeat="cate in event.categories">
			    		{{cate.name}} <span ng-if="!$last">,</span>
			    	</span>
			    </div>
		    <div class="padding-all border-all round-corner form-control text-danger" ng-show="event.categories.length===0">
		    	<span class="text-danger">
		    		<span class="glyphicon glyphicon-warning-sign"></span>
			   		Please select categories from the lists below!
		    	</span>
			 </div>
		    
			</div>

	   		<category-list parent-type="event"></category-list>

			<div class="error alert alert-danger pull-left" ng-show="submitted&&(eventForm.ageFrom.$error.required||eventForm.ageFrom.$error.pattern||eventForm.ageFrom.$error.min)">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Min age should be an integer and greater than 0
	    	</div>
	    	<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Min Age</span>
			  <input type="number" min="1" ng-pattern="/^[0-9]+$/" class="form-control" name="ageFrom" ng-model="event.ageFrom" ng-required="true" placeholder="Enter minimum age"/>
			</div>

			<div class="error alert alert-danger pull-left" ng-show="submitted&&(eventForm.ageTo.$error.required||eventForm.ageTo.$error.pattern||eventForm.ageTo.$error.min)">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Max age should be an integer and greater than 0
	    	</div>			
	    	<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.ageTo.$error.greaterThan">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Max age should be grater than min age
	    	</div>
	    	<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Max Age</span>
			  <input type="number" min="1"  greater-than="event.ageFrom" ng-pattern="/^[0-9]+$/" class="form-control" name="ageTo" ng-model="event.ageTo" ng-required="true" placeholder="Enter maximum age"/>
			</div>
    		
    		<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.contactPerson.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Contact Person is required
	    	</div>
	    	<div class="clearfix"></div>
		  	<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Contact</span>
			  <input type="text" class="form-control" name="contactPerson" ng-model="event.contactPerson" ng-required="true" placeholder="Enter contact person"/>
			</div>

    		<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.email.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Email is required
	    	</div>
	    	 <div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.email.$error.email">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Email is invalid
	    	</div> <div class="clearfix"></div>
		  <div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Email</span>
		    	<input type="email" class="form-control" name="email" ng-model="event.email" placeholder="Enter email" ng-required="true"/>
			</div>


    		<div class="error alert alert-danger pull-left" ng-show="submitted&&eventForm.phoneNumber.$error.required">
		    	<span class="glyphicon glyphicon-warning-sign"></span> Phone is required
	    	</div>
	    	<div class="clearfix"></div>
			<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon">Phone</span>
			  <input type="tel" class="form-control" name="phoneNumber" ng-model="event.phoneNumber" placeholder="Enter phone number" ng-required="true"/>
			</div>


    		<div class="input-group input-group-lg margin-bottom">
			  <span class="input-group-addon no-border-all round-corner">Notes</span>
			  <input type="text" class="form-control" style="visibility:hidden;border:none" />
			</div>
				<div class="main-text margin-bottom">
					<div text-angular ng-model="event.notes" ta-toolbar="[['bold','italics','underline'],['ul','ol'],['redo', 'undo'],['html','insertLink']]" ta-text-editor-class="form-content" ta-html-editor-class="form-content" placeholder="Enter notes." class="rte padding-all round-corner "></div>

				</div>	
				<div class="clearfix"></div>				
		  
		  <button type="submit" ng-click="submitted=true" class="btn btn-primary">Submit</button>
		  <a  ng-href="#/overview" class="btn btn-default">Cancel</a>
		</form>
	  </div>
	</div>
	
	<pre ng-bind="event | json"></pre>
	<!-- 
	<pre ng-bind="categoryList | json"></pre>
	 -->
 </div>
 
 
 
 